<template>
  <div id="salvenote">
    <div class="page-header">
      <span class="title-item">库存统计</span>
      <span class="download-btn">
        <a-icon type="cloud-download" />导出数据
      </span>
    </div>
    <div class="infor">
      <a-row style="display: flex;align-items: center;padding:20px 0;">
        <span style="color:#9fb043;">设备型号</span>
        <a-col :span="5" style="width:300px;margin-left:10px">
          <a-input placeholder v-model="searchkey" />
        </a-col>
        <span style="color:#9fb043;margin-left:20px">设备分类</span>
        <a-col :span="5">
          <a-select
            style="width:300px;margin-left:10px"
            default-value
            allow-clear
            v-model="sparePropertyId"
          >
            <a-select-option
              :value="item.id"
              v-for="(item,index) in property"
              :key="index"
            >{{item.propertyName}}</a-select-option>
          </a-select>
        </a-col>
        <span style="color:#9fb043;margin-left:20px">物资分类</span>
        <a-col :span="5">
          <a-select
            style="width:300px;margin-left:10px"
            default-value
            allow-clear
            v-model="spareTypeId"
          >
            <a-select-option
              :value="item.id"
              v-for="(item,index) in typeId"
              :key="index"
            >{{item.typeName}}</a-select-option>
          </a-select>
        </a-col>

        <a-col :span="2">
          <a-button
            type="primary"
            @click="getdata()"
          >查询</a-button>
        </a-col>
      </a-row>
    </div>
    <div class="table-form">
      <a-table
        :rowKey="record=> record.id"
        :columns="columns"
        :data-source="data"
        :pagination="false"
        size="small"
      >
        <template slot="stop" slot-scope="stop">
          <span style="color:#905992;">{{stop}}</span>
        </template>
        <template slot="go" slot-scope="go">
          <span style="color:#3f698f;">{{go}}</span>
        </template>
        <template slot="wei" slot-scope="wei">
          <span style="color:#478350">{{wei}}</span>
        </template>
        <span slot="action" slot-scope="text,record,index">
          <a class="solvebtn" @click="showModal(record,index)">申领详情</a>
          <!--<a class="solvebtn">设备维修情况</a>-->
        </span>
      </a-table>
      <div class="bottompage">
        <div></div>
        <div class="page-box">
          <a-pagination
            :show-total="total => `共 ${total}条记录`"
            v-model="current"
            :total="total"
            :defaultPageSize="size"
            :item-render="itemRender"
            @change="pagechangeFn"
          />
        </div>
      </div>
    </div>
    <addmodal :modalVisible.sync="addModalVisible" v-bind:send="send" ref="mychild"></addmodal>
  </div>
</template>

<script>
import addmodal from "./modal";
export default {
  data() {
    return {
      data: [],
      columns: [
        {
          title: "序号",
          dataIndex: "id",
          scopedSlots: { customRender: "name" },
          ellipsis: true,
          customRender: (text, record, index) =>
            `${(this.current - 1) * this.size + index + 1}`,

          align: "center",
        },
        {
          title: "设备分类",
          dataIndex: "spareTypeName",
          align: "center",
        },
        {
          title: "设备属性",
          dataIndex: "sparePropertyName",
          align: "center",
        },
        {
          title: "设备型号",
          dataIndex: "spareVersion",
          align: "center",
        },
        {
          title: "设备名称",
          dataIndex: "spareName",
          align: "center",
        },

        {
          title: "设备总数",
          dataIndex: "totalStock",
          width: "7%",
          align: "center",
        },
        {
          title: "状态",
          children: [
            {
              title: "未出库",
              dataIndex: "notOutboundAmount",
              scopedSlots: { customRender: "notOutboundAmount" },
              width: "8%",
              align: "center",
            },
            {
              title: "已出库",
              dataIndex: "outboundAmount",
              scopedSlots: { customRender: "outboundAmount" },
              width: "8%",
              align: "center",
            }
          ],
        },
        {
          title: "操作",
          dataIndex: "",
          key: "x",
          scopedSlots: { customRender: "action" },
          align: "center",
        },
      ],
      current: 1,
      size: 10,
      total: 0,
      typeId: [],
      property: [], //备品属性列表
      spareTypeId: "", //类型id
      sparePropertyId: "", //属性
      searchkey: "", //查询关键字
      addModalVisible: false,
      send: {}, //模态框请求参数
      userId:""
    };
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(
            `selectedRowKeys: ${selectedRowKeys}`,
            "selectedRows: ",
            selectedRows
          );
        },
        getCheckboxProps: (record) => ({
          props: {
            disabled: record.name === "Disabled User", // Column configuration not to be checked
            name: record.name,
          },
        }),
      };
    },
  },
  components: {
    addmodal,
  },
  mounted() {
    this.getAtrribute(), this.getdata();this.getTypeId();this.getId();
  },
  methods: {
    getId() {
      this.userId = this.$user.id;
    },
    //模态框
    showModal(data, index) {
      console.log(data, index);
      this.addModalVisible = !this.addModalVisible;
      this.send = data;
      this.$nextTick(() => {
        this.$refs.mychild.initializeRequest("B");
      });

      console.log(this.send);
    },
    // 分页器
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a>上一页</a>;
      } else if (type === "next") {
        return <a>下一页</a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      console.log(page, pageSize);
      this.current = page;
      this.size = pageSize;
      this.getdata();
    },
    // 查询获取统计库存
    getdata() {
      this.$api
        .PostlistInventory({
          currentPage: this.current,
          pageSize: this.size,
          searchKey: this.searchkey,
          spareTypeId: this.spareTypeId,
          sparePropertyId: this.sparePropertyId,
          userId:this.userId
        })
        .then((res) => {
          console.log(res);
          this.data = res.data.data.records;
          this.total = res.data.data.total;
        });
    },
    //获取类型id
    getTypeId() {
      this.$api.GetstockBytype().then((res) => {
        this.typeId = res.data.data;
        console.log(this.typeId);
      });
    },
    //获取备品属性
    getAtrribute() {
      this.$api.GetlistSpareProperty().then((res) => {
        this.property = res.data.data;
        console.log(this.property);
      });
    },
    // selectedPro() {
    //   this.getTypeId();
    // },
    //类型下拉框事件
    // drop() {
    //   console.log(111);
    //   if (this.sparePropertyId == "") {
    //     this.$message.error("请先选择设备属性!");
    //   }
    // },
  },
};
</script>
<style scoped src="../../../assets/style/warning.css"></style>
<style scoped lang="scss" >
::v-deep .ant-table-tbody > tr > td:nth-child(2) {
  padding: 0px;
  height: 52px;
}
#salvenote {
  position: relative;
  width: 98%;
  height: 98%;
  padding: 1%;
  box-sizing: border-box;
}
.solve-img {
  display: flex;
  justify-content: space-evenly;
}

#salvenote .solvebtn {
  margin-right: 10px;
  border: none;
  font-weight: 700;
  color: #2c6a5f;
}
#salvenote .ant-btn-danger {
  color: #1c2c2c;
  margin-right: 10px;
  background-color: #2c6a60;
  border: none;
  font-weight: 700;
}

/* 分页 */
::v-deep .ant-pagination-total-text {
  color: rgba(255, 255, 255, 0.7);
}
.bottompage {
  width: 96%;
  position: absolute;
  right: 3%;
  bottom: 10px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
#salvenote ::v-deep .ant-checkbox-inner {
  border: 2px solid #2e9685;
  background-color: rgba(140, 179, 174, 0.5) !important;
}
#salvenote .ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link {
  border: 0;
  background-color: rgba(30, 50, 48, 0.5);
  box-shadow: 0 0 10px 1px #188471 inset;
}
::v-deep .ant-table-tbody > tr > td{
  padding: 16px 16px;
}

::v-deep#salvenote .ant-table-thead > tr:last-child > th:nth-child(1) {
  background: #478350 !important;
  color: #1c2c2c !important;
  border: 0;
}
::v-deep#salvenote .ant-table-thead > tr:last-child > th:nth-child(2) {
  background: #3f698f !important;
  color: #1c2c2c !important;
  border: 0;
}
::v-deep#salvenote .ant-table-thead > tr:last-child > th:nth-child(3) {
  background: #905992 !important;
  color: #1c2c2c !important;
  border: 0;
}
::v-deep#salvenote
  .ant-table-small
  > .ant-table-content
  > .ant-table-body
  > table
  > .ant-table-tbody
  > tr
  > td:nth-child(7) {
  border-left: 1px solid #2c6a5f !important;
}
::v-deep#salvenote
  .ant-table-small
  > .ant-table-content
  > .ant-table-body
  > table
  > .ant-table-tbody
  > tr
  > td:nth-child(8) {
  border-left: 1px solid #2c6a5f !important;
}
::v-deep#salvenote
  .ant-table-small
  > .ant-table-content
  > .ant-table-body
  > table
  > .ant-table-tbody
  > tr
  > td:nth-child(9) {
  border-left: 1px solid #2c6a5f !important;
}
::v-deep#salvenote
  .ant-table-small
  > .ant-table-content
  > .ant-table-body
  > table
  > .ant-table-tbody
  > tr
  > td:nth-child(10) {
  border-left: 1px solid #2c6a5f !important;
}
</style>
